<template>
    <div id="Comment">

        <el-container>

            <!--  页头 -->
            <el-header>
                <span style="background-color: rgb(26, 188, 156)">&nbsp;</span> <span>课程评论列表</span>

                <div class="h-but">
                    <el-button @click="Refresh" size="small" ><i class="el-icon-refresh"></i> 刷新</el-button>
                    <el-button @click="back" size="small" ><i class="el-icon-arrow-left"></i> 返回</el-button>
                </div>
            </el-header>

            <!--  筛选按钮区域 -->
            <div style="margin-bottom: 14px;background-color: #FFFFFF;height: 55px;line-height: 55px;">
                <span style="margin-left: 80px">用户账号：</span><el-input v-model="Account" size="medium " style="width: 180px" placeholder="用户账号"></el-input>

                <span style="margin-left: 80px">用户昵称：</span><el-input v-model="UserName" size="medium " style="width: 180px" placeholder="用户昵称"></el-input>

                <span style="margin-left: 125px">状态：</span>
                <el-select clearable size="medium" style="width: 180px" v-model="selectStatus" placeholder="全部状态">
                    <el-option
                            v-for="item in selectData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>


                <el-button style="margin-left: 105px" @click="screen" size="medium" ><i class="el-icon-search"></i> 查询</el-button>
            </div>

            <!-- 记录 -->
            <el-main  style="background-color: #FFFFFF;height: 136px">
                <el-table border :data="recordData" style="width: 100%">
                    <el-table-column align="center" prop="historyFrequency" label="历史评论次数"></el-table-column>
                    <el-table-column align="center" prop="historyNumber" label="历史评论人数"></el-table-column>
                    <el-table-column align="center" prop="todayFrequency" label="今日评论次数"></el-table-column>
                    <el-table-column align="center" prop="todayNumber" label="今日评论人数"></el-table-column>
                </el-table>
            </el-main>

            <!-- 表格数据区 -->
            <el-footer style="line-height: 60px;text-indent: 5px">

                <el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                    <el-table-column align="center" prop="account" label="成员账号"></el-table-column>
                    <el-table-column align="center" prop="nickname" label="昵称"></el-table-column>
                    <el-table-column align="center" prop="belong" label="所属"></el-table-column>
                    <el-table-column align="center" prop="commentDate" label="发言时间"></el-table-column>
                    <el-table-column align="center" prop="content" label="发言内容"></el-table-column>
                    <el-table-column align="center" prop="commentStatus" label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.commentStatus == 0">待审核</span>
                            <span v-if="scope.row.commentStatus == 1">已通过</span>
                            <span v-if="scope.row.commentStatus == 2">已拦截</span>
                            <span v-if="scope.row.commentStatus == 3">已删除</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="操作">
                        <template slot-scope="scope" >
                            <span v-if="scope.row.commentStatus == 0"><el-button  type="text" size="small" @click="upStatus(scope.row.id,1)"> 通过 </el-button></span>
                            <span v-if="scope.row.commentStatus == 0"><el-button style="margin-left: 5px"  type="text" size="small" @click="upStatus(scope.row.id,2)"> 拦截 </el-button></span>

                            <span v-if="scope.row.commentStatus == 1"><el-button  type="text" size="small" @click="upStatus(scope.row.id,3)"> 删除 </el-button></span>
                            <span v-if="scope.row.commentStatus == 1"><el-button style="margin-left: 5px"  type="text" size="small" @click="upStatus(scope.row.id,2)"> 拦截 </el-button></span>

                            <span v-if="scope.row.commentStatus == 2"><el-button  type="text" size="small" @click="upStatus(scope.row.id,3)"> 删除 </el-button></span>
                            <span v-if="scope.row.commentStatus == 2"><el-button style="margin-left: 5px"  type="text" size="small" @click="upStatus(scope.row.id,1)"> 通过 </el-button></span>

                            <span v-if="scope.row.commentStatus == 3"><el-button  type="text" size="small"> 无 </el-button></span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paging">
                    <el-pagination align='center'
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,7,9]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.length">
                    </el-pagination>
                </div>
            </el-footer>

        </el-container>

    </div>
</template>

<script>
export default {
    inject: ['reload'],
    data(){
        return{
            //记录
            recordData:[],
            //表格信息
            tableData:[],
            currentPage: 1, // 当前页码
            total: 0, // 总条数
            pageSize: 7, // 每页的数据条数
            selectData: [],
            selectStatus:null,
            Account:null,
            UserName:null,
            BanKuai:"s",
        }
    },
    created(id,sta) {
        //获取recordData数据
        this.$http.get("/Comment/RecordData",{params:{Bankuai:2}}).then(res => {
            this.recordData = res.data
        })
        //获取表格信息
        this.$http.get("/Comment/tableData",{params:{Bankuai:'s'}}).then(res => {
            this.tableData = res.data
        })
        //评论状态
        this.selectData = [
            {
                value: '1',
                label: '已通过'
            },{
                value: '2',
                label: '已拦截'
            }, {
                value: '3',
                label: '已删除'
            }
        ]

    },
    methods: {
        //刷新按钮
        Refresh(){
            this.reload()
        },
        //返回按钮
        back(){
            this.$router.back()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        //筛选按钮
        screen(){
            this.total = 0;
            this.$http.get("/Comment/tableData",{params:{status:this.selectStatus,Account:this.Account,UserName:this.UserName,Bankuai:this.BanKuai}}).then(res => {
                this.tableData = res.data
            })
        },
        //修改状态
        upStatus(id,sta){
            this.$http.get("/Comment/upStatus",{params:{sta:sta,id:id}}).then(res => {
                this.reload()
                if (res.data.status == 200) {
                    this.$message(res.data.msg);
                }else{
                    this.$message(res.data.msg);
                    if (e == 2){
                        setTimeout(()=>{
                            row.online = 1
                        },1000)

                    } else if(e == 1) {
                        setTimeout(()=>{
                            row.online = 2
                        },500)
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
    .s-btn{
        display: inline-block;
        float: left;
    }
    .el-header{
        background-color: #F3F3F3;
        line-height: 50px;
        padding: 0px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .el-form-item{
        display: inline-block;
        margin-left: 50px;
        margin-top: 0px;
    }
    .el-main{
        background-color: #F3F3F3;
        padding: 0px;
        line-height: 62px;
        height: 130px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
     }
    .paging{
        background-color: #FFFFFF;
        line-height: 45px;
        height: 45px;
        padding-top: 12px;
    }
    .el-footer{
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        padding: 0px;
    }
    .f-div{
        display: inline-block;
    }
    .m-btn{
        float: right;
        margin: auto;
    }
    .h-but{
        display: inline-block;
        float: right;
        margin-right: 16px;
    }
    .el-footer{
        background-color: #F3F3F3;
        padding: 0px;
    }
</style>
